<template>
	<view class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="top-bg"></view>
		<dawnBar title="用户信息"></dawnBar>

		<form @submit="formSubmit" report-submit='true'>
			<view class="page-container" style="padding-bottom: 110rpx;">

				<view class="tn-bg-white dawn-shadow dawn-radius">

					<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-sm">
						<view class="tn-flex tn-flex-col-center justify-content-item">
							<view class=" tn-text-center"
								style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
								<text class="tn-icon-image" style="font-size: 30rpx;"></text>
							</view>
							<view class="">
								<text class="tn-text-lg tn-padding-right-xs">头像</text>
							</view>
						</view>

						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view @click.stop='uploadpic' class="tn-padding-right-xs">
								<tn-avatar :src='newAvatar ? newAvatar : userInfo.avatar' size="90rpx"></tn-avatar>
							</view>
							<view>
								<text class="tn-icon-right tn-color-gray--dark"></text>
							</view>
						</view>
					</view>
					<view class='dawn-line'></view>

					<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-sm">
						<view class="tn-flex tn-flex-col-center justify-content-item">
							<view class=" tn-text-center"
								style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
								<text class="tn-icon-my-circle-fill" style="font-size: 30rpx;"></text>
							</view>
							<view class="">
								<text class="tn-text-lg tn-padding-right-xs">昵称</text>
							</view>
						</view>
						<view class="justify-content-item tn-text-df tn-color-grey" @tap="clear">
							<view class="tn-padding-right tn-text-lg">
								<input placeholder="请填写昵称" :value="userInfo.nickname" name="nickname"
									placeholder-style="color:#AAAAAA"></input>
							</view>
						</view>
					</view>
					<view class='dawn-line'></view>

					<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-sm">
						<view class="tn-flex tn-flex-col-center justify-content-item">
							<view class=" tn-text-center"
								style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
								<text class="tn-icon-image-text" style="font-size: 30rpx;"></text>
							</view>
							<view class="">
								<!-- <text class="tn-text-lg tn-padding-right-xs">openid</text> -->
							</view>
						</view>
						<view class="justify-content-item tn-text-df tn-color-grey">
							<view class="tn-padding-right tn-text-lg">
								<text class="tn-text-lg tn-color-gray tn-padding-right-xs">{{userInfo.openid}}</text>
							</view>
						</view>
					</view>
					<view class='dawn-line'></view>

					<!-- <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-sm">
						<view class="tn-flex tn-flex-col-center justify-content-item">
							<view class=" tn-text-center"
								style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
								<text class="tn-icon-identity-fill" style="font-size: 30rpx;"></text>
							</view>
							<view class="">
								<text class="tn-text-lg tn-padding-right-xs">身份证号</text>
							</view>
						</view>
						<view class="justify-content-item tn-text-df tn-color-grey">
							<view class="tn-padding-right tn-text-lg">
								<text class="tn-text-lg tn-color-gray tn-padding-right-xs">{{userInfo.cardNo}}</text>
							</view>
						</view>
					</view>
					<view class='dawn-line'></view> -->

					<!-- <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-sm">
						<view class="tn-flex tn-flex-col-center justify-content-item">
							<view class=" tn-text-center"
								style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
								<text class="tn-icon-phone-fill" style="font-size: 30rpx;"></text>
							</view>
							<view class="">
								<text class="tn-text-lg tn-padding-right-xs">手机号码</text>
							</view>
						</view>
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view>
								<text class="tn-text-lg tn-color-gray tn-padding-right-xs">{{userInfo.mobile}}</text>
							</view>
							<view>
								<text class="tn-icon-right tn-color-gray--dark"></text>
							</view>
						</view>
					</view>
					<view class='dawn-line'></view> -->

					<!-- <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-sm">
						<view class="tn-flex tn-flex-col-center justify-content-item">
							<view class=" tn-text-center"
								style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
								<text class="tn-icon-paperbag-fill" style="font-size: 30rpx;"></text>
							</view>
							<view class="">
								<text class="tn-text-lg tn-padding-right-xs">密码</text>
							</view>
						</view>
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view @click.stop='uploadpic'>
								<text class="tn-text-lg tn-color-gray tn-padding-right-xs">点击修改密码</text>
							</view>
							<view>
								<text class="tn-icon-right tn-color-gray--dark"></text>
							</view>
						</view>
					</view>
					<view class='dawn-line'></view> -->

					<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-sm">
						<view class="tn-flex tn-flex-col-center justify-content-item">
							<view class=" tn-text-center"
								style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
								<text class="tn-icon-set-fill" style="font-size: 30rpx;"></text>
							</view>
							<view class="">
								<text class="tn-text-lg tn-padding-right-xs">权限设置</text>
							</view>
						</view>
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view @click.stop='Setting'>
								<text class="tn-text-lg tn-color-gray tn-padding-right-xs">点击管理</text>
							</view>
							<view>
								<text class="tn-icon-right tn-color-gray--dark"></text>
							</view>
						</view>
					</view>
					<view class='dawn-line'></view>

				</view>

			</view>
<!-- 			<view class="tn-flex-1 justify-content-item tn-text-center">
				<tn-button formType="submit" backgroundColor="#3571BB" shape="round" padding="40rpx 0" width="90%"
					shadow fontBold>
					<text class="tn-color-white">保存修改</text>
					<text class="tn-icon-topics tn-padding-left-xs tn-color-white"></text>
				</tn-button>
			</view> -->
			<view class="tn-flex-1 justify-content-item tn-text-center tn-margin-top-xl">
				<tn-button @click="outLogin()" class="dawn-btn-lg dawn-btn-lg__danger">
					<text class="tn-icon-logout tn-padding-right-xs"></text>
					<text>退出登陆</text>
				</tn-button>
			</view>
		</form>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import * as UserApi from '@/api/member/user.js';
	import * as AuthApi from '@/api/member/auth.js';
	export default {
		mixins: [page_mixin],
		computed: mapGetters(['isLogin', 'userInfo']),
		components: {},
		data() {
			return {
				memberInfo: {},
				loginType: 'h5', //app.globalData.loginType
				newAvatar: '',
			};
		},
		onLoad() {
			if (!this.isLogin) {
				toLogin();
			}
			console.table(this.userInfo);
		},
		methods: {
			/**
			 * 小程序设置
			 */
			Setting: function() {
				uni.openSetting({
					success: function(res) {
						console.log(res.authSetting)
					}
				});
			},
			/**
			 * 退出登录
			 */
			outLogin: function() {
				if (this.loginType === 'h5') {
					uni.showModal({
						title: '提示',
						content: '确认退出登录?',
						success: res => {
							if (!res.confirm) {
								console.log('用户点击取消');
								return
							}
							AuthApi.logout().then(res => {
								this.$store.commit("LOGOUT");
								uni.reLaunch({
									url: '/main/index/index'
								});
							}).catch(err => {
								console.log(err);
							});
						}
					});
				}
			},
			/**
			 * 上传文件
			 */
			uploadpic: function() {
				this.$util.uploadImageOne({}, res => {
					this.newAvatar = res.data;
				});
			},

			/**
			 * 提交修改
			 */
			formSubmit: function(e) {
				const formData = e.detail.value
				if (!formData.nickname) {
					return this.$util.Tips({
						title: '用户姓名不能为空'
					});
				}
				UserApi.updateUser({
					nickname: formData.nickname,
					avatar: this.newAvatar ? this.newAvatar : this.userInfo.avatar
				}).then(res => {
					// 刷新用户信息
					this.$store.dispatch('USERINFO');
					// 提示
					return this.$util.Tips({
						title: '保存成功',
						icon: 'success'
					}, {
						tab: 3,
						url: 1
					});
				}).catch(msg => {
					return this.$util.Tips({
						title: msg || '保存失败，您并没有修改'
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	input {
		text-align: end;
	}
</style>